<template>


  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      title="纠错详情"
      width="50%"
      @close="handleClose"
    >
      <el-descriptions :column="1" class="margin-top" border>
        <el-descriptions-item label="试题信息">
          <div v-html="detail.quId_dictText"/>
        </el-descriptions-item>
        <el-descriptions-item label="纠错学员">
          {{ detail.createBy_dictText }}
        </el-descriptions-item>
        <el-descriptions-item label="纠错时间">
          {{ detail.createTime }}
        </el-descriptions-item>
        <el-descriptions-item label="纠错详情">
          <div v-html="detail.content"/>
        </el-descriptions-item>
        <el-descriptions-item label="审核状态">
          <span :class="{'success':detail.auditState===1, 'danger':detail.auditState===2}">
            {{ detail.auditState_dictText }}
          </span>
        </el-descriptions-item>
        <el-descriptions-item label="审核人">
          {{ detail.auditBy_dictText }}
        </el-descriptions-item>
        <el-descriptions-item label="审核理由">
          {{ detail.auditMsg }}
        </el-descriptions-item>
        <el-descriptions-item label="奖励积分">
          {{ detail.auditPoints }}
        </el-descriptions-item>

      </el-descriptions>


      <div slot="footer" class="dialog-footer">
        <el-button :disabled="detail.auditState!==0" type="primary" @click="handAudit">审 核</el-button>
      </div>
    </el-dialog>
    <report-audit-dialog :visible.sync="auditVisible" :ids="auditIds" @callback="fetchDetail"/>
  </div>
</template>

<script>

import { detail } from '@/api/qu/report'
import ReportAuditDialog from '@/views/admin/repo/qu/components/ReportAuditDialog.vue'

export default {
  name: 'ReportViewDialog',
  components: { ReportAuditDialog },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: String
  },
  data() {
    return {
      dialogVisible: false,
      detail: {},
      auditVisible: false,
      auditIds: []
    }
  },

  watch: {

    visible: {
      handler() {
        this.dialogVisible = this.visible
        this.fetchDetail()
      }
    },
    id: {
      handler(val) {
        this.fetchDetail()
        this.auditIds = [val]
      }
    }
  },

  created() {
    this.dialogVisible = this.visible
    this.fetchDetail()
  },

  methods: {

    // 提交审核
    fetchDetail() {
      if (!this.id) {
        return
      }
      detail(this.id).then(res => {
        this.detail = res.data
      })
    },

    handleClose() {
      this.postForm = {}
      this.$emit('update:visible', false)
      this.$emit('callback')
    },

    handAudit() {
      this.auditVisible = true
    }
  }
}
</script>

<style scoped>
::v-deep .el-descriptions-row th {
  width: 100px;
}
</style>
